<!DOCTYPE html>
<html lang="en">
<!-- 消防物资类型 -->

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人员卡片</title>
    <link rel="icon" href="../static/img/icon.png">
    <link rel="stylesheet" href="../static/js/layui/css/layui.css">
    <link rel="stylesheet" href="../static/css/animate.min.css">
    <link rel="stylesheet" href="../static/css/style.css">

    <style>
        #v-chart {
            width: calc(100% - 0.1rem);
            height: 92%;
            margin-top: 4%;
            margin-left: 0.05rem;
            background-image: url('../static/img/city.png');
            background-repeat: no-repeat;
            background-position: 0 50%;
            background-size: 200% 80%;

        }
        #v-chart::before{
            
        }

        /* #v-chart::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg,
                    rgba(0, 212, 255, 0) 0%,
                    rgba(10, 38, 99, 0.3) 30%,
                    rgba(16, 49, 158, 0.3) 40%,
                    rgba(12, 180, 209, 0.3) 50%,
                    rgba(27, 119, 155, 0.3) 60%,
                    rgba(10, 86, 158, 0.3) 70%,
                    rgba(4, 92, 133, 0.3) 80%,
                    rgba(3, 88, 114, 0.3) 90%,
                    rgba(0, 212, 255, 0) 100%);
                    
            background-size: 500% 100%;
            animation: flow 30s linear infinite;
        }

        #v-chart::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg,
                    rgba(255, 255, 255, 0) 0%,
                    rgba(255, 255, 255, 0.2) 50%,
                    rgba(255, 255, 255, 0) 100%);
            background-size: 500% 100%;
            animation: flow 20s linear infinite;
            animation-delay: 2s;
        }

        @keyframes flow {
            0% {
                background-position: -250% 0;
            }

            100% {
                background-position: 250% 0;
            }
        } */

        .contain-table-list {
            height: calc(100% - 0.3rem);
        }
    </style>
</head>

<body>
    <div class="app" style="overflow: hidden;">
        <div class="header animate__animated animate__slideInDown">
            <div class="header-title">训战研判系统平台</div>
            <div class="header-menu">
                
            </div>
        </div>
        <div class="contain">
            <div class="contain-menu animate__animated animate__slideInLeft">

            </div>
            <div class="contain-table">
                <div class="contain-table-list">
                    <div id="v-chart"></div>
                </div>
            </div>

        </div>
    </div>



    <script type="text/javascript" src="../static/js/util/jquery.min.js"></script>
    <script type="text/javascript" src="../static/js/biz/app.js"></script>
    <script type="text/javascript" src="../static/js/layui/layui.js"></script>
    <script type="text/javascript" src="../static/js/biz/manCard.js"></script>
    <script type="text/javascript" src="../static/js/util/echarts.min.js"></script>
</body>

</html>